<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>直接显示msg：{{msg}}</p>
			<p>直接反转msg：{{msg.split('').reverse().join('')}}</p>
			<p>计算属性msg：{{reverseMsg}}</p>
			<hr >
			<p>{{firstName}}</p>
			<p>{{lastName}}</p>
			<p>{{fullNameReturn}}</p> <!-- 计算属性的get方法，没有等号，或者在等号右边，获取即为get -->
			<button type="button" @click="fullNameReturn='嘉慧'">改名</button> <!-- 计算属性中的set方法，变量在等号左边，设置即为set -->
			<button type="button" @click="prop.name='ljh2'">修改prop属性</button>
			<button type="button" @click="prop={name:'ljh2'}">修改prop2属性</button>
			<hr><br>
			<ul v-for="(v,k,i) in pros">
				<h1>店铺名：{{k}} 当前店铺的商品总数是{{thisCount(k)}}</h1><!-- 计算属性是不存在后面加()的，如果有那么这个()是调用return回来的方法，这样就可以了传参操作 -->
				<li v-for="(a,b,c) in v"> 
					<p> 
						商品名：{{a.name}}——数量：{{a.count}}
					</p> 
				</li>
			</ul>
			<p>所有商品总数:{{allCount}}</p>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					msg:"hello LiuJiahe",
					firstName:"刘",
					lastName:"家禾",
					fullName:"",
					prop:{
						name:'ljh',
						age:18
					},
					pros:{
						"001":{
							"6789":{name:"xx",count:2},
							"5674":{name:"aa",count:3}
						},
						"002":{
							"9977":{name:"vv",count:5}
						},
						"003":{
							"5545":{name:"yy",count:1},
							"3322":{name:"ii",count:5},
							"4521":{name:"oo",count:7}
						}
					}
				},
				computed:{
					// 计算属性为对象，函数方法是get的简写，对象中有set和get两种方法，vue会自动根据你的调用来判断选择get和set
					fullNameReturn:{
						set(v){
							this.lastName=v;
						},
						get(){
							return this.firstName + this.lastName;
						}
					},
                    reverseMsg:function(){
                        return this.msg.split('').reverse().join('');
                    },
					thisCount(){
						return function(v){
							let thiscount=0;
							for(let j in this.pros[v])
							thiscount+=this.pros[v][j].count;
							return thiscount
						}
					},
					allCount(){
						let allcount = 0;
						for(let i in this.pros){
							for(let j in this.pros[i])
								allcount+=this.pros[i][j].count;
						}
						return allcount;
					}
				},
				//watch 侦听器 观察和响应Vue实例上的数据变动，侦听某个数据发生变动就触发
				// 1、观察一个值，当他发生变化的时候，我们能立刻发现，可以进行后续的操作
				// 2、可以不断侦听data和props的数据，也可以进一步侦听其他的全局对象，比如router路由对象
				// 3、设置侦听器的时候，侦听器的名字不可自定义，其名字就是需要侦听的数据名字
				watch:{
					firstName(n,o){
						console.log("firstName改变了",n,o);
					},
					lastName(n,o){
						console.log("lastName改变了",n,o);
					},
					prop:{
						handler(){
							console.log('prop发生了变化')
						},
						immediate:true, //打开页面直接执行一次，可以用来直接发送ajax请求
						deep:true //打开监听对象的属性
					},
					//只想监听一个属性的简写形式
					"prop.name"(){
						console.log("porp的name发生了变化");
					}
				}
			})
		</script>
	</body>
</html>
